<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>首页</title>

	<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="static/css/admin.css" rel="stylesheet" type="text/css" />
	<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="static/css/hmstyle.css" rel="stylesheet" type="text/css" />
	<link href="static/css/skin.css" rel="stylesheet" type="text/css" />
	<script src="static/js/jquery.min.js"></script>
	<script src="static/js/amazeui.min.js"></script>

</head>

<body>
	<div class="hmtop">
		<div id="container">
			<!--顶部导航条 -->
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div class="menu-hd" v-if="isLogin">
							{{username}},欢迎您
						</div>
						<div class="menu-hd" v-else>
							亲，请<a href="login.html" target="_top" class="h">登录</a>
							<a href="register.html" target="_top">免费注册</a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
					</div>
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng">
							<a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
						</div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd">
							<a id="mc-menu-hd" href="shopcart.html" target="_top">
								<i class="am-icon-shopping-cart  am-icon-fw"></i>
								<span>购物车</span>
								<strong id="J_MiniCartNum" class="h"></strong>
							</a>
						</div>
					</div>
				</ul>
			</div>
			<!--悬浮搜索框-->
			<div class="nav white">
				<div class="logoBig">
					<img src="static/images/logo.png" style="margin-left: 0px">
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form action="search.html">
						<input id="searchInput" v-model="keyword" name="index_none_header_sysc" type="text"
							placeholder="请输入商品关键字" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button"
							@click="toSearch">
					</form>
				</div>
			</div>
			<!--轮播 -->
			<div class="banner">

				<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
					<ul class="am-slides">
						<li v-if="indexImgs.length>0" v-for="img,index in indexImgs" :class="'banner'+(index+1)">
							<a><img :src="'static/images/'+img.imgUrl" /></a>
						</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<div class="shopNav">
				<div class="slideall">
					<!-- 分类选项 -->
					<div class="long-title"><span class="all-goods">全部分类</span></div>
					<div class="nav-cont">
						<ul>
							<li class="index"><a href="index.html">首页</a></li>
							<li class="qc"><a href="#">闪购</a></li>
							<li class="qc"><a href="#">限时抢</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="#">大包装</a></li>
						</ul>
						<div class="nav-extra">
							<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
							<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
						</div>
					</div>
					<!--左侧边分类导航 -->
					<div id="nav" class="navfull">
						<div class="area clearfix">
							<div class="category-content" id="guide_2">
								<div class="category">
									<ul class="category-list" id="js_climit_li">
										<li v-for="c1 in categories" class="appliance js_toggle relative">
											<div class="category-info">
												<h3 class="category-name b-category-name">
													<i><img :src="'static/images/'+c1.categoryIcon"></i>
													<a class="ml-22" :title="c1.categoryName">{{c1.categoryName}}</a>
												</h3>
												<em>&gt;</em>
											</div>
											<!--一级分类下的二级分类-->
											<div class="menu-item menu-in top">
												<div class="area-in">
													<div class="area-bg">
														<div class="menu-srot">
															<div class="sort-side">
																<!--每个dl代表一个二级分类-->
																<dl class="dl-sort" v-for="c2 in c1.categories">
																	<dt><span
																			:title="c2.categoryName">{{c2.categoryName}}</span>
																	</dt>
																	<dd v-for="c3 in c2.categories">
																		<a :title="c3.categoryName"
																			:href="'search.html?cid='+c3.categoryId"><span>{{c3.categoryName}}</span></a>
																	</dd>
																</dl>
															</div>

														</div>
													</div>
												</div>
											</div>
											<b class="arrow"></b>
										</li>
									</ul>
								</div>

							</div>

						</div>
					</div>
					<!--右信息栏 -->
					<div class="marqueen">
						<span class="marqueen-title">商城头条</span>
						<div class="demo">
							<ul>
								<li class="title-first"><a target="_blank" href="#">
										<span>[特惠]</span>商城爆品1分秒
									</a></li>
								<li class="title-first"><a target="_blank" href="#">
										<span>[公告]</span>商城与广州市签署战略合作协议
									</a></li>
								<div class="mod-vip">
									<div class="m-baseinfo" v-if="isLogin">
										<a href="user-center.html">
											<img :src="'static/'+userimg">
										</a>
										<em>
											Hi,<span class="s-name">{{username}}</span>
											<a href="#">
												<p>点击更多优惠活动</p>
											</a>
										</em>
									</div>
									<div class="member-logout" v-else>
										<a class="am-btn-warning btn" href="login.html">登录</a>
										<a class="am-btn-warning btn" href="register.html">注册</a>
									</div>
								</div>
								<li><a target="_blank" href="search.html"><span>[特惠]</span>洋河年末大促，低至两件五折</a></li>
								<li><a target="_blank" href="search.html"><span>[公告]</span>华北、华中部分地区配送延迟</a></li>
								<li><a target="_blank" href="search.html"><span>[特惠]</span>家电狂欢千亿礼券 买1送1！</a></li>
							</ul>
							<div class="advTip"><img src="static/images/advTip.jpg" /></div>
						</div>
					</div>
				</div>
				<div class="shopMainbg">
					<div class="shopMain" id="shopmain">
						<!--新品推荐 -->
						<div class="am-g am-g-fixed recommendation">
							<div class="clock am-u-sm-3">
								<img src="static/images/2016.png" style="border-radius: 50%;"></img>
								<p>新品<br>推荐</p>
							</div>
							<a v-for="rp in recommendProducts" :href="'introduction.html?pid='+rp.productId">
								<div class="am-u-sm-4 am-u-lg-3 ">
									<div class="info ">
										<h3>{{rp.productName}}</h3>
										<h4>销量：{{rp.soldNum}}</h4>
									</div>
									<div class="recommendationMain one">
										<img v-if="rp.imgs.length>0" :src="'static/pimgs/'+rp.imgs[0].url"></img>
									</div>
								</div>
							</a>
						</div>
						<!--热门活动 -->
						<div class="am-container activity ">
							<div class="shopTitle ">
								<h4>活动</h4>
								<h3>每期活动 优惠享不停 </h3>
								<span class="more ">
									<a href="# ">全部活动<i class="am-icon-angle-right" style="padding-left:10px ;"></i></a>
								</span>
							</div>
							<div class="am-g am-g-fixed ">
								<div class="am-u-sm-3 ">
									<div class="icon-sale one "></div>
									<h4>秒杀</h4>
									<div class="activityMain ">
										<img src="static/images/activity1.jpg "></img>
									</div>
									<div class="info ">
										<h3>春节送礼优选</h3>
									</div>
								</div>
								<div class="am-u-sm-3 ">
									<div class="icon-sale two "></div>
									<h4>特惠</h4>
									<div class="activityMain ">
										<img src="static/images/activity2.jpg "></img>
									</div>
									<div class="info ">
										<h3>春节送礼优选</h3>
									</div>
								</div>
								<div class="am-u-sm-3 ">
									<div class="icon-sale three "></div>
									<h4>团购</h4>
									<div class="activityMain ">
										<img src="static/images/activity3.jpg "></img>
									</div>
									<div class="info ">
										<h3>春节送礼优选</h3>
									</div>
								</div>
								<div class="am-u-sm-3 last ">
									<div class="icon-sale "></div>
									<h4>超值</h4>
									<div class="activityMain ">
										<img src="static/images/activity.jpg "></img>
									</div>
									<div class="info ">
										<h3>春节送礼优选</h3>
									</div>
								</div>
							</div>
						</div>
						<!--饼干/膨化 -->
						<template v-for="rc,index in recommendCategories">
							<div v-if="index==1" :id="'f'+(index+1)">
								<!--甜点-->
								<div class="am-container ">
									<div class="shopTitle ">
										<h4>{{rc.categoryName}}</h4>
										<h3>{{rc.categorySlogan}}</h3>
										<div class="today-brands ">
											<a href="# ">桂花糕</a>
											<a href="# ">奶皮酥</a>
											<a href="# ">栗子糕 </a>
											<a href="# ">马卡龙</a>
											<a href="# ">铜锣烧</a>
											<a href="# ">豌豆黄</a>
										</div>
										<span class="more ">
											<a href="# ">更多美味<i class="am-icon-angle-right"
													style="padding-left:10px ;"></i></a>
										</span>
									</div>
								</div>
								<div class="am-g am-g-fixed floodFour">
									<div class="am-u-sm-5 am-u-md-4 text-one list ">
										<div class="word">
											<a class="outer" href="#"><span class="inner"><b
														class="text">威化</b></span></a>
											<a class="outer" href="#"><span class="inner"><b
														class="text">夹心</b></span></a>
											<a class="outer" href="#"><span class="inner"><b
														class="text">早餐</b></span></a>
											<a class="outer" href="#"><span class="inner"><b
														class="text">粗粮</b></span></a>
											<a class="outer" href="#"><span class="inner"><b
														class="text">曲奇</b></span></a>
											<a class="outer" href="#"><span class="inner"><b
														class="text">经典</b></span></a>
										</div>
										<a href="# ">
											<div class="outer-con ">
												<div class="title ">
													开抢啦！
												</div>
												<div class="sub-title ">
													零食大礼包
												</div>
											</div>
											<img :src="'static/images/'+rc.categoryPic" />
										</a>
										<div class="triangle-topright"></div>
									</div>

									<div class="am-u-sm-7 am-u-md-4 text-two sug" v-if="rc.products.length > 0">
										<div class="outer-con ">
											<div class="title ">{{rc.products[0].productName}}</div>
											<div class="sub-title ">
												销量：{{rc.products[0].soldNum}}
											</div>
											<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
										</div>
										<a href="# "><img v-if="rc.products[0].imgs.length>0"
												:src="'static/pimgs/'+rc.products[0].imgs[0].url" /></a>
									</div>

									<div class="am-u-sm-7 am-u-md-4 text-two" v-if="rc.products.length > 1">
										<div class="outer-con ">
											<div class="title ">{{rc.products[1].productName}}</div>
											<div class="sub-title ">
												销量：{{rc.products[1].soldNum}}
											</div>
											<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
										</div>
										<a href="# "><img v-if="rc.products[1].imgs.length>0"
												:src="'static/pimgs/'+rc.products[1].imgs[0].url" /></a>
									</div>


									<div class="am-u-sm-3 am-u-md-2 text-three big" v-if="rc.products.length > 2">
										<div class="outer-con ">
											<div class="title ">{{rc.products[2].productName}}</div>
											<div class="sub-title ">销量：{{rc.products[2].soldNum}}</div>
											<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
										</div>
										<a href="# "><img v-if="rc.products[2].imgs.length>0"
												:src="'static/pimgs/'+rc.products[2].imgs[0].url" /></a>
									</div>

									<div class="am-u-sm-3 am-u-md-2 text-three sug" v-if="rc.products.length > 3">
										<div class="outer-con ">
											<div class="title ">{{rc.products[3].productName}}</div>
											<div class="sub-title ">销量：{{rc.products[3].soldNum}}</div>
											<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
										</div>
										<a href="# "><img v-if="rc.products[3].imgs.length>0"
												:src="'static/pimgs/'+rc.products[3].imgs[0].url" /></a>
									</div>

									<div class="am-u-sm-3 am-u-md-2 text-three " v-if="rc.products.length > 4">
										<div class="outer-con ">
											<div class="title ">{{rc.products[4].productName}}</div>
											<div class="sub-title ">销量：{{rc.products[4].soldNum}}</div>
											<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
										</div>
										<a href="# "><img v-if="rc.products[4].imgs.length>0"
												:src="'static/pimgs/'+rc.products[4].imgs[0].url" /></a>
									</div>

									<div class="am-u-sm-3 am-u-md-2 text-three last big " v-if="rc.products.length > 5">
										<div class="outer-con ">
											<div class="title ">{{rc.products[5].productName}}</div>
											<div class="sub-title ">销量：{{rc.products[5].soldNum}}</div>
											<i class="am-icon-shopping-basket am-icon-md  seprate"></i>
										</div>
										<a href="# "><img v-if="rc.products[5].imgs.length>0"
												:src="'static/pimgs/'+rc.products[5].imgs[0].url" /></a>
									</div>

								</div>
								<div class="clear "></div>
							</div>
						</template>
						<!--底部 -->
						<div class="footer ">
							<div class="footer-hd ">
								<p>
									<a href="# ">菜狗商城</a>
									<b>|</b>
									<a href="# ">商城首页</a>
									<b>|</b>
									<a href="# ">支付宝</a>
									<b>|</b>
									<a href="# ">物流</a>
								</p>
							</div>
							<div class="footer-bd ">
								<p>
									<a href="# ">关于菜狗</a>
									<a href="# ">合作伙伴</a>
									<a href="# ">联系我们</a>
									<a href="# ">网站地图</a>
									<em>©xujiu.com 版权所有</em>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		window.jQuery || document.write('<script src="static/js/jquery.min.js "><\/script>');
		if ($(window).width() < 640) {
			function autoScroll(obj) {
				$(obj).find("ul").animate({
					marginTop: "-39px"
				}, 500, function () {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				})
			}
			$(function () {
				setInterval('autoScroll(".demo")', 3000);
			})
		}
	</script>
	<script type="text/javascript " src="static/js/quick_links.js "></script>
	<script type="text/javascript" src="static/js/cookie_utils.js"></script>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript" src="static/js/axios.min.js"></script>
	<script type="text/javascript" src="static/js/base.js"></script>
	<script type="text/javascript">

		var vm = new Vue({
			el: "#container",
			data: {
				username: null,
				userimg: null,
				isLogin: false,
				indexImgs: [],
				categories: [],
				recommendProducts: [],
				recommendCategories: [],
				keyword: null,
			},
			created: function () {
				//从cookie中获取token、username、userImg
				var token = getCookieValue("token");
				if (token != null && token != "") {
					this.isLogin = true;
					this.username = getCookieValue("username");
					this.userimg = getCookieValue("userImg");
				}

				//轮播图
				var url1 = baseUrl + "index/indeximg";
				axios.get(url1).then((res) => {
					var vo = res.data;
					this.indexImgs = vo.data;
					//console.log("-----------------------轮播图");
					//console.log(this.indexImgs);
					//渲染轮播图
					//初始化轮播图动画效果
					setTimeout(function () {
						$('.am-slider').flexslider();
					}, 100)
				});

				//分类列表
				var url2 = baseUrl + "index/category-list";
				axios.get(url2).then((res) => {
					console.log(res.data.data);
					this.categories = res.data.data;
					// 初始化分类列表的动画效果
					setTimeout(function () {
						$("li").hover(function () {
							$(".category-content .category-list li.first .menu-in").css("display", "none");
							$(".category-content .category-list li.first").removeClass("hover");
							$(this).addClass("hover");
							$(this).children("div.menu-in").css("display", "block")
						}, function () {
							$(this).removeClass("hover")
							$(this).children("div.menu-in").css("display", "none")
						});
					}, 100);
				});

				//新品推荐
				var url3 = baseUrl + "index/list-recommends";
				axios.get(url3).then((res) => {
					console.log(res.data.data);
					this.recommendProducts = res.data.data;

				});

				//分类商品
				var url4 = baseUrl + "index/category-recommends";
				axios.get(url4).then((res) => {
					console.log("www" + res.data.data);
					this.recommendCategories = res.data.data;
				});

			},
			methods: {
				toSearch: function () {
					var url = "search.html?keyword=" + this.keyword;
					window.location.href = encodeURI(url);
				}
			}
		});
	</script>
</body>

</html>